<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Project Möbius</title>
    <style>
        body {
            background-color: #8BC6EC;
            background-image: linear-gradient(270deg, #8BC6EC 0%, #484bcc 100%);
            display: flex;
            line-height: 1.4;
            margin: 0;
        }
        
        .a {
            position: relative;
            width: 700px;
            height: 400px;
            border: #fff 10px solid;
            background-color: #5B46E5;
            top: 120px;
            left: 100px;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0.2em 0.5em 1em rgba(0, 0, 0, 0.3);
        }
        
        .b {
            position: absolute;
            width: 200px;
            height: 300px;
            left: 0;
            margin: 75px 50px;
            transition: 1s;
        }
        
        .b a {
            text-decoration: none;
            color: #fff;
            font: 900 28px '';
        }
        
        .b h2 {
            /* 鼠标放开时的动画，第一个值是动画的过渡时间
            第二个值是延迟一秒后执行动画 */
            transition: .5s 1s;
            opacity: 0;
            color: rgb(30, 210, 200);
        }
        
        .b span {
            transition: .5s 1s;
            color: #fff;
            font: 500 15px '';
            position: absolute;
            top: 70px;
        }
        
        .c {
            position: absolute;
            top: -130px;
            right: -240px;
        }
        
        .d,
        .e {
            position: absolute;
            right: calc(var(--i)*100px);
            width: calc(var(--w)*40px);
            height: 500px;
            overflow: hidden;
            border-radius: 100px;
            transform: rotateZ(220deg) translate(0, 0);
            /* 角度 */
            background: rgb(240, 220, 150);
            transition: .5s .5s;
        }
        
        .d:nth-child(2) {
            background: rgb(240, 190, 230);
        }
        
        .e {
            left: -470px;
            top: -140px;
            width: 70px;
            background-color: rgb(90, 220, 150);
        }
        
        .a:hover .c div {
            /* 设置延迟动画 */
            transition: .5s calc(var(--i)*.1s);
            /* 移动的轨迹 */
            transform: rotateZ(220deg) translate(-200px, 400px);
        }
        
        .a:hover .b {
            transition: 1s .5s;
            left: 370px;
        }
        
        .a:hover .b span {
            transition: 1s .5s;
            top: 105px;
        }
        
        .a:hover .b h2 {
            transition: 1s .5s;
            opacity: 1;
        }
        
        .f {
            width: 250px;
            height: 250px;
            position: absolute;
            background-image: url("../resources/image/ava.gif");
            background-size: cover;
            margin: 70px;
            opacity: 0;
            transition: .5s;
        }
        
        .a:hover .f {
            transition: 1s 1.3s;
            opacity: 1;
        }
        
        h1,
        h2,
        h3 {
            color: white;
            font-family: Arial, Helvetica, sans-serif;
            font: bold;
            font-weight: 400;
        }
        
        .page-header {
            margin: 0;
            padding: 1rem;
        }
        
        @media (min-width: 30em) {
            .page-header {
                padding: 2rem 2rem 3rem;
            }
        }
        
        @media (min-width: 30em) {
            .main-nav {
                position: fixed;
                left: 0;
                top: 8.25rem;
                z-index: 10;
                background-color: transparent;
                transition: background-color .5s linear;
                border-top-right-radius: 0.5em;
                border-bottom-right-radius: 0.5em;
            }
            .main-nav:hover {
                background-color: rgba(0, 0, 0, 0.6);
            }
        }
        
        .nav-links {
            display: flex;
            margin-top: 0;
            margin-bottom: 1rem;
            padding: 0 1rem;
            list-style: none;
            justify-content: space-between;
        }
        
        .nav-links>li+li {
            margin-left: 0.8em;
        }
        
        .nav-links>li>a {
            display: block;
            padding: 0.8em 0;
            color: white;
            font-size: 0.8rem;
            text-decoration: none;
            text-transform: uppercase;
            letter-spacing: 0.06em;
        }
        
        .nav-links__icon {
            height: 1.5em;
            width: 1.5em;
            vertical-align: -0.2em;
        }
        
        .nav-links>li>a:hover {
            color: hsl(40, 100%, 70%);
        }
        
        @media (min-width: 30em) {
            .nav-links {
                display: block;
                padding: 1em;
                margin-bottom: 0;
            }
            .nav-links>li+li {
                margin-left: 0;
            }
            .nav-links__label {
                display: inline-block;
                margin-left: 1em;
                padding-right: 1em;
                opacity: 0;
                transform: translate(-1em);
                transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.3), opacity 0.4s linear;
            }
            .nav-links:hover .nav-links__label,
            .nav-links a:focus>.nav-links__label {
                opacity: 1;
                transform: translate(0);
            }
            .nav-links>li:nth-child(2) .nav-links__label {
                transition-delay: 0.1s;
            }
            .nav-links>li:nth-child(3) .nav-links__label {
                transition-delay: 0.2s;
            }
            .nav-links>li:nth-child(4) .nav-links__label {
                transition-delay: 0.3s;
            }
            .nav-links>li:nth-child(5) .nav-links__label {
                transition-delay: 0.4s;
            }
            .nav-links__icon {
                transition: transform 0.2s ease-out;
            }
            .nav-links a:hover>.nav-links__icon,
            .nav-links a:focus>.nav-links__icon {
                transform: scale(1.3);
            }
        }
    </style>
</head>

<body>
    <!-- 名片分三大块
    最外层的一块a
    文字一大块b
    平面圆柱一块c -->
    <header>
        <h1 class="page-header">Project Möbius</h1>
    </header>
    <nav class="main-nav">
        <ul class="nav-links">
            <li>
                <a href="web.html">
                    <img src="../resources/image/home.svg" class="nav-links__icon">
                    <span class="nav-links__label">Home</span>
                </a>
            </li>
            <li>
                <a href="pro.html">
                    <img src="../resources/image/calendar.svg" alt="" class="nav-links__icon">
                    <span class="nav-links__label">Problems</span>
                </a>
            </li>
            <li>
                <a href="re.html">
                    <img src="../resources/image/members.svg" alt="" class="nav-links__icon">
                    <span class="nav-links__label">Login</span>
                </a>
            </li>
            <li>
                <a href="about.html">
                    <img src="../resources/image/star.svg" alt="" class="nav-links__icon">
                    <span class="nav-links__label">About</span>
                </a>
            </li>
        </ul>
    </nav>
    <div class="a">
        <div class="b">
            <a href="#">Möbius</a>
            <h2>exclusion</h2>
            <span>If we list all the natural numbers below 10 that are multiples of 3 or 5, we get 3, 5, 6 and 9. The sum of these multiples is 23.

                Find the sum of all the multiples of 3 or 5 below 1000.</span>
        </div>
        <div class="c">
            <!-- --i是用来计算平面圆柱的动效延迟和距离的
            --w则是用来计算平面圆柱的宽度 -->
            <div class="d" style="--i:1;--w:1.5"></div>
            <div class="d" style="--i:2;--w:1.6"></div>
            <div class="d" style="--i:3;--w:1.4"></div>
            <div class="d" style="--i:4;--w:1.7"></div>
            <div class="e" style="--i:1"></div>
        </div>
        <!-- 设置二维码 -->
        <div class="f"></div>
    </div>
</body>

</html>